<template>
  <el-container>
    <!--模型树展示-->
    <el-aside width="300px" class="content-left-list">
      <div class="ps-panel nav-left-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">模型信息</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="addModel">添加</el-button>
            <el-button type="primary" size="mini" @click="deleteModel" :disabled="this.currModelId === 0">删除</el-button>
          </span>
        </div>

        <div class="ps-panel-body">
          <el-tree :data="labels" node-key="id" default-expand-all :expand-on-click-node="false"
            :props="{ label: 'label_name' }" @node-click="treeNodeClick"></el-tree>
          <!--<el-menu :default-active="nodeTypes[0].node" class="el-menu-vertical">-->
          <!--<el-menu-item v-for="item of nodeTypes" :index="item.node" :key="item.node" @click="init(item.node)">{{item.node_name}}</el-menu-item>-->
          <!--</el-menu>-->
        </div>
      </div>
    </el-aside>

    <!--中间主体部分展示-->
    <el-main class="content-main" style="height: 100%">
      <!--属性列表-->
      <div class="ps-panel nav-left-menu" style="height: 50%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">属性列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="add" v-show="this.currModelId > 0">添加属性</el-button>
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table :data="modelProperties" size="small" highlight-current-row stripe
            style="width: 100%; margin-bottom: 10px">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="data_type" label="数据类型">
              <template slot-scope="scope">
                {{dataTypelist[scope.row.data_type]}}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
                <el-popover style="margin-left: 10px" width="160" trigger="manual" :ref="'del_popover_' + scope.row.id">
                  <p style="text-align: center; margin: 15px 0px">
                    确定删除吗？
                  </p>
                  <div style="text-align: center; margin: 0">
                    <el-button size="mini" @click="delPopoverClose('del_popover_' + scope.row.id)">
                      取消
                    </el-button>
                    <el-button type="primary" size="mini" @click="delProperty(scope.row)">确定
                    </el-button>
                  </div>
                  <el-button type="text" slot="reference" size="small"
                    @click="delPopoverShow('del_popover_' + scope.row.id)">删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="text-align: center; width: 100%">
            <el-pagination v-if="paginations.total > 0" :page-size="paginations.pageSize" :layout="paginations.layout"
              :total="paginations.total" :current-page="paginations.pageIndex" @current-change="getModeProperties">
            </el-pagination>
          </div>
        </div>
      </div>

      <!--关系列表-->
      <div class="ps-panel nav-left-menu" style="height: 50%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-list"></i>
          <span class="ps-panel-head-title">关系列表</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="addModelRelationship"
              v-show="this.currRelationlId > 0 && this.currModelId > 0">添加关系</el-button>
          </span>
        </div>

        <div class="ps-panel-body">
          <el-table :data="modelRelationships" size="small" highlight-current-row stripe
            style="width: 100%; margin-bottom: 10px">
            <el-table-column prop="id" label="序号"></el-table-column>
            <el-table-column prop="relationship_label_name" label="名称"></el-table-column>
            <el-table-column prop="start_node_label_name" label="开始类型"></el-table-column>
            <el-table-column prop="end_node_label_name" label="结束类型"></el-table-column>
            <el-table-column prop="description" label="描述"></el-table-column>
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="editModelRelationship(scope.row)">编辑
                </el-button>
                <el-popover style="margin-left: 10px" width="160" trigger="manual" :ref="'del_popover_' + scope.row.id">
                  <p style="text-align: center; margin: 15px 0px">
                    确定删除吗？
                  </p>
                  <div style="text-align: center; margin: 0">
                    <el-button size="mini" @click="delPopoverClose('del_popover_' + scope.row.id)">
                      取消
                    </el-button>
                    <el-button type="primary" size="mini" @click="delModelRelationship(scope.row)">
                      确定
                    </el-button>
                  </div>
                  <el-button type="text" slot="reference" size="small"
                    @click="delPopoverShow('del_popover_' + scope.row.id)">删除
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination" style="text-align: center; width: 100%">
            <el-pagination v-if="modelRelationshipsPaginations.total > 0"
              :page-size="modelRelationshipsPaginations.pageSize" :layout="modelRelationshipsPaginations.layout"
              :total="modelRelationshipsPaginations.total" :current-page="modelRelationshipsPaginations.pageIndex"
              @current-change="getModelRelationships">
            </el-pagination>
          </div>
        </div>
      </div>
    </el-main>

    <!--关系树展示-->
    <el-aside width="300px" class="content-left-list">
      <div class="ps-panel nav-right-menu" style="height: 100%">
        <div class="ps-panel-head">
          <i class="ps-panel-head-icon iconfont icon-guanxiwajue"></i>
          <span class="ps-panel-head-title">关系信息</span>
          <span class="query">
            <el-button type="primary" size="mini" @click="addRelationship">添加</el-button>
            <el-button type="primary" size="mini" @click="deleteRelationship" :disabled="this.currRelationlId === 0">删除
            </el-button>
          </span>
        </div>

        <div class="ps-panel-body">
          <el-tree :data="allRelationshipsTreeInfo" node-key="id" default-expand-all :expand-on-click-node="false"
            :props="{ label: 'label_name' }" @node-click="treeRelationClick">
            <span class="custom-tree-node" style="width:100%;font-size: 14px;" slot-scope="{ node, data }"
              @mouseover="onMouseOver(node, data)" @mouseleave="onMouseDown(node, data)">
              <span>{{ data.label_name }}</span>
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <span v-show="isOnmove && currentTreeMoveID == data.id">
                <i @click.stop="editRelative(data, node)" class="el-icon-edit"
                  style="color: #409eff; margin-right: 0.7em"></i>
                <i class="el-icon-delete" style="color: #409eff; margin-right: 0.7em"
                  @click.stop="delRelative(data, node)"></i>
              </span>
            </span>
          </el-tree>
          <!--<el-menu :default-active="nodeTypes[0].node" class="el-menu-vertical">-->
          <!--<el-menu-item v-for="item of nodeTypes" :index="item.node" :key="item.node" @click="init(item.node)">{{item.node_name}}</el-menu-item>-->
          <!--</el-menu>-->
        </div>
      </div>
    </el-aside>

    <!--模型属性详情展示-->
    <el-dialog :title="modelProperty.titile+'模型属性'" :visible.sync="modelProperty.visible" width="800px" class="edit">
      <!--            循环展示属性-->
      <!--            <el-form ref="modelProperty" v-for="(value, key) in modelProperty.data" :rules="modelProperty.rules" label-width="100px" :key="key">-->
      <!--                <el-form-item :label="key" prop="key">-->
      <!--                    <el-input :v-model="value" maxlength="20" placeholder="请输入"></el-input>-->
      <!--                </el-form-item>-->
      <!--            </el-form>-->

      <el-form ref="modelProperty" :model="modelProperty.data" :rules="modelProperty.rules" label-width="100px">
        <el-form-item label="名称：" prop="name">
          <el-input v-model="modelProperty.data.name" maxlength="20" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="别名：" prop="display_name">
          <el-input v-model="modelProperty.data.display_name" maxlength="20" placeholder="请输入别名"></el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="modelProperty.data.description" maxlength="20" placeholder="请输入描述名称"></el-input>
        </el-form-item>
        <el-form-item label="数据类型：" prop="data_type">
          <el-select v-model="modelProperty.data.data_type" placeholder="请选择">
            <el-option v-for="item in dataTypelists" :label="item.name" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：" prop="create_date">
          <el-input v-model="modelProperty.data.create_date" maxlength="50" placeholder="请输入时间"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="modelProperty.visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增模型界面-->
    <el-dialog title="新增模型" :visible.sync="model.visible" width="800px" class="edit">
      <el-form ref="model" :model="model.data" :rules="model.rules" label-width="100px">
        <el-form-item label="名称：" prop="labelName">
          <el-input v-model="model.data.labelName" maxlength="20" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="是否显示：" prop="isShow">
          <el-radio-group v-model="model.data.isShow">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
          <!-- <el-input v-model="model.data.isShow" maxlength="20" placeholder="请输入"></el-input> -->
        </el-form-item>
        <el-form-item label="类型：" prop="type">
          <el-select v-model="model.data.type" placeholder="请选择">
            <el-option v-for="(a,s) in obligedlist" :key="s" :label="a.label" :value="a.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：" prop="addtime">
          <el-input v-model="model.data.addtime" maxlength="50" placeholder="请输入时间"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="model.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveModel">确 定</el-button>
      </span>
    </el-dialog>

    <!--新增关系模型界面-->
    <el-dialog :title="TitleRelation" :visible.sync="relation.visible" width="1000px" class="edit">
      <el-form ref="relation" :model="relation.data" :rules="relation.rules" label-width="100px">
        <el-form-item label="名称：" prop="label_name">
          <el-input v-model="relation.data.label_name" maxlength="20" placeholder="请输入名称" style="width:70%;"
            @change="changeInput"></el-input>
        </el-form-item>
        <div class="addItem">
          <p>添加核心词</p>
          <el-button :disabled="relation.data.label_name?false:true" type="primary" size="mini" icon="el-icon-plus"
            circle title="添加一行" @click="addItemRow"></el-button>
        </div>

        <el-table :data="relation.data.tableData" stripe style="width: 100%;" height="250"
          :header-cell-style="{ background: '#1E90FF', color: '#fff' }">
          <el-table-column type="index" label="序号" width="60"></el-table-column>
          <el-table-column v-for="(item, i) in relationlist" :key="i + '1'" :label="item.label" :prop="item.label"
            align="center" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-form-item :prop="'tableData.' + scope.$index + '.'+item.label" label-width="0px"
                :rules="relation.rules[item.label]">
                <el-input :disabled="relation.data.label_name?false:true"
                  v-model.trim="relation.data.tableData[scope.$index][item.label]" placeholder="请输入值">
                </el-input>
              </el-form-item>
              <!-- <el-select v-model="tableData[scope.$index].relationship_label_name" placeholder="请选择字段"
                @change="selectedfield">
                <el-option v-for="item in relationlist" :key="item.value" :label="item.label" :value="item.value"
                  :disabled="item.disabled">
                </el-option>
              </el-select> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" :disabled="scope.$index == 0" @click="handleDelete(scope.$index)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="relation.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveRelationship">确 定</el-button>
      </span>
    </el-dialog>

    <!--模型关联关系的展示界面-->
    <el-dialog title="关系信息" :visible.sync="modelRelationship.visible" width="800px" class="edit">
      <el-form ref="modelRelationship" :model="modelRelationship.data" :rules="modelRelationship.rules"
        label-width="100px">
        <el-form-item label="名称：" prop="relationship_label_name">
          <el-input v-model="modelRelationship.data.relationship_label_name" maxlength="20" placeholder="请输入名称">
          </el-input>
        </el-form-item>
        <el-form-item label="描述：" prop="description">
          <el-input v-model="modelRelationship.data.description" maxlength="20" placeholder="请输入描述名称"></el-input>
        </el-form-item>
        <!-- <el-form-item label="开始类型ID：" prop="start_node_type">
          <el-input
            v-model="modelRelationship.data.start_node_type"
            maxlength="20"
            placeholder="请选择开始类型"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="开始类型：" prop="start_node_label_name">
          <el-popover ref="popup_tree_popover_start" placement="bottom-start" width="200" trigger="click">
            <!--                        @show="showTree('start')">-->
            <popupTree :labels="labels" @nodeClick="nodeClick" TreeType="start"></popupTree>

            <el-input v-model="modelRelationship.data.start_node_label_name" maxlength="20" placeholder="请选择开始类型"
              slot="reference"></el-input>
          </el-popover>
        </el-form-item>
        <!-- <el-form-item label="结束类型ID：" prop="end_node_type">
          <el-input
            v-model="modelRelationship.data.end_node_type"
            maxlength="20"
            placeholder="请选择结束类型"
          ></el-input>
        </el-form-item> -->
        <el-form-item label="结束类型：" prop="end_node_label_name">
          <el-popover ref="popup_tree_popover_end" placement="bottom-start" width="200" trigger="click">
            <popupTree :labels="labels" @nodeClick="nodeClick" TreeType="end"></popupTree>
            <el-input v-model="modelRelationship.data.end_node_label_name" maxlength="20" placeholder="请选择结束类型"
              slot="reference"></el-input>
          </el-popover>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modelRelationship.visible = false">取 消</el-button>
        <el-button type="primary" @click="saveModelRelationship">确 定</el-button>
      </span>
    </el-dialog>
  </el-container>
</template>

<script>
  import popupTree from "./components/popupTree";
  import {
    getNowtime
  } from "../../../api/dateTime"
  // import * as d3 from "d3";

  // var Neo4jD3 = require('neo4jd3');
  export default {
    name: "index",
    components: {
      popupTree,
    },
    data: function () {
      return {
        labels: [],
        //数据类型
        dataTypelists: [{
            value: 1,
            label: "int",
            name: "整型",
          },
          {
            value: 2,
            label: "long",
            name: "长整型",
          },
          {
            value: 3,
            label: "string",
            name: "字符串",
          },
          {
            value: 4,
            label: "double",
            name: "浮点型",
          },
          {
            value: 5,
            label: "datetime",
            name: "日期",
          },
          {
            value: 6,
            label: "boolean",
            name: "布尔型",
          },
        ],
        //类型
        obligedlist: [{
          value: 1,
          label: "类型"
        }, {
          value: 2,
          label: "实体"
        }, {
          value: 3,
          label: "国家"
        }, {
          value: 4,
          label: "地区"
        }],
        currModelId: 0,
        currModelLabelName: "",
        modelProperties: [],
        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 5, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },

        //新增模型信息
        model: {
          visible: false,
          rules: {
            labelName: [{
              required: true,
              message: "名称不能为空",
              trigger: "blur"
            }],
            isShow: [{
              required: true,
              message: "是否显示不能为空"
            }],
            type: [{
              required: true,
              message: "数据类型不能为空"
            }],
            addtime: [{
              required: true,
              message: "创建时间不能为空"
            }],
          },
          data: {
            id: 0,
            labelName: "新增模型名称",
            parentId: 0,
            isShow: 1,
            type: 1,
            target: 0,
            addtime: "",
          },
        },

        //新增或者编辑模型属性信息
        modelProperty: {
          visible: false,
          titile: "添加",
          rules: {
            name: [{
              required: true,
              message: "名称不能为空"
            }],
            display_name: [{
              required: true,
              message: "别名不能为空"
            }],
            data_type: [{
              required: true,
              message: "数据类型不能为空"
            }],
            // createDate: [{required: true, message: '创建时间不能为空'}]
          },
          data: {
            create_date: "",
            data_type: 0,
            description: "",
            display_name: "",
            id: 0,
            label_id: 0,
            name: "",
            rule: "",
          },
        },


        //所有关系模型树
        allRelationshipsTreeInfo: [],
        currRelationlId: 0,
        currRelationLabelName: "",
        //新增关系信息
        relation: {
          visible: false,
          process: 0,
          rules: {
            label_name: [{
              required: true,
              message: "名称不能为空"
            }],
            uuid: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: "uuid不能为空"
            }],
            名称: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入名称',
            }],
            别名: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入别名',
            }],
            所属关系标签: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入所属关系标签',
            }],
            所属关系类型: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入所属关系类型',
            }],
            移动定义: [{
              type: 'string',
              required: true,
              trigger: 'blur',
              message: '请输入移动定义',
            }],
          },
          data: {
            id: 0,
            label_name: "",
            parent_id: 0,
            is_show: 1,
            type: 5,
            target: 0,
            addtime: "",
            tableData: []
          },
        },
        //指定模型的关系列表
        modelRelationships: [],
        modelRelationshipsPaginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 5, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },
        //新增或者编辑模型的关联关系信息
        modelRelationship: {
          visible: false,
          rules: {
            relationship_label_name: [{
              required: true,
              message: "名称不能为空"
            }, ],
            // relationshipType: [{required: true, message: '数据类型不能为空'}],
            // createDate: [{required: true, message: '创建时间不能为空'}]
          },
          data: {},
        },
        TreeType: "", //树类

        tableData: [],
        relationlist: [{
          id: 0,
          label: 'uuid',
          value: 'uuid',
        }, {
          id: 1,
          label: '名称',
          value: '名称',
        }, {
          id: 2,
          label: '别名',
          value: '别名',
        }, {
          id: 3,
          label: '所属关系标签',
          value: '所属关系标签',
        }, {
          id: 4,
          label: '所属关系类型',
          value: '所属关系类型',
        }, {
          id: 5,
          label: '移动定义',
          value: '移动定义',
        }],
        isOnmove: false, //鼠标浮动到当前节点，显示出来
        currentTreeData: {}, //关系节点情况
        TitleRelation: '', //关系弹框标题
        currentTreeMoveID: "", //鼠标浮动到当前节点 保存id
        dataTypelist: ['unknown', 'int', 'long', 'string', 'double', 'datetime', 'boolean']
      };
    },
    methods: {
      //点击模型树节点
      treeNodeClick(data) {
        // console.log("111111111111111111111111", data);
        this.currModelId = data.id;
        this.currModelLabelName = data.label_name;
        //查询节点模型的属性列表 分页查询
        this.getModeProperties(1);
        //查询节点模型关联的关系列表 分页查询
        this.getModelRelationships(1);
      },
      //根据选中的模型 查询其属性列表
      getModeProperties(pageIndex) {
        // console.log("22222222222222222222", pageIndex, this.currModelId);
        if (pageIndex === undefined) {
          pageIndex = this.paginations.pageIndex;
        } else {
          this.paginations.pageIndex = pageIndex;
        }

        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/dicLabelProperties?label_id.equals=" +
            this.currModelId,
          method: "get",
          data: {
            page: pageIndex - 1,
            size: this.paginations.pageSize
          },
          succeed: (res) => {
            // console.log(
            //   "333333333333333333333",
            //   res.headers["x-total-count"],
            //   res.headers["X-Total-Count"]
            // );
            this.modelProperties = res.data;
            this.paginations.total = parseInt(res.headers["x-total-count"]);
          },
        });
      },

      delProperty(row) {
        // console.log("del ................. ", row);
        // this.delPopoverClose('del_popover_'+row.id);
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabelProperties/" + row.id,
          method: "delete",
          data: {},
          succeed: () => {
            this.getModeProperties();
            this.$message.success("删除成功");
            this.delPopoverClose("del_popover_" + row.id);
          },
        });
      },

      delPopoverShow(ref) {
        this.$refs[ref].doShow();
      },
      delPopoverClose(ref) {
        this.$refs[ref].doClose();
      },

      add() {
        this.modelProperty.visible = true;
        this.modelProperty.titile = '添加';
        this.modelProperty.data = {
          id: 0,
          name: "",
          label_id: this.currModelId,
          display_name: "",
          description: "",
          data_type: 1,
          create_date: "",
        };
        this.$refs['modelProperty'].resetFields();
      },

      edit(row) {
        console.log(row);
        this.modelProperty.visible = true;
        this.modelProperty.titile = '编辑';
        // this.modelProperty.data = this.clone(row);
        this.modelProperty.data = this.clone(row);
      },
      save() {
        this.$refs.modelProperty.validate((valid) => {
          if (valid) {
            if (this.modelProperty.data.id === 0) {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/dicLabelProperties",
                method: "post",
                data: this.modelProperty.data,
                succeed: () => {
                  this.getModeProperties();
                  this.$message.success("保存成功");
                  this.modelProperty.visible = false;
                  this.$refs.modelProperty.resetFields();
                },
              });
            } else {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/dicLabelProperties",
                method: "put",
                data: this.modelProperty.data,
                succeed: () => {
                  this.getModeProperties();
                  this.$message.success("保存成功");
                  this.modelProperty.visible = false;
                  this.$refs.modelProperty.resetFields();
                },
              });
            }
          }
        });
      },

      checkType(any) {
        return Object.prototype.toString.call(any).slice(8, -1);
      },
      clone(any) {
        let retType = this.checkType(any);
        if (retType === "Object") {
          // 拷贝对象
          let o = {};
          for (let key in any) {
            o[key] = this.clone(any[key]);
          }
          return o;
        } else if (retType === "Array") {
          // 拷贝数组
          var arr = [];
          for (let i = 0, leng = any.length; i < leng; i++) {
            arr[i] = this.clone(any[i]);
          }
          return arr;
        } else if (retType === "Function") {
          // 拷贝函数
          return new Function("return " + any.toString()).call(this);
        } else if (retType === "Date") {
          // 拷贝日期
          return new Date(any.valueOf());
        } else if (retType === "RegExp") {
          // 拷贝正则
          return new RegExp(any);
        } else if (retType === "Map") {
          // 拷贝Map 集合
          let m = new Map();
          any.forEach((v, k) => {
            m.set(k, this.clone(v));
          });
          return m;
        } else if (retType === "Set") {
          // 拷贝Set 集合
          let s = new Set();
          for (let val of any.values()) {
            s.add(this.clone(val));
          }
          return s;
        }
        return any;
      },

      addModel() {
        this.model.visible = true;
        this.model.data = {
          id: 0,
          labelName: "",
          parentId: this.currModelId,
          isShow: 1,
          type: 1,
          target: 0,
          addtime: getNowtime(),
        };
      },
      deleteModel() {
        this.$confirm("此操作将永久删除该模型, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$store.dispatch("ajax", {
              url: "services/app-zonghe/api/dicLabel/" + this.currModelId,
              method: "delete",
              succeed: () => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });

                this.currModelId = 0;
                this.initLabels();
              },
            });

            // this.$api.normalization.delNormalization(row).then((res) => {
            //     if (res.status === 200) {
            //         this.$message({
            //             type: 'success',
            //             message: '删除成功!'
            //         })
            //         this.initLabels();
            //     }
            // }, () => {
            //     this.$message('删除失败！')
            // })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },
      saveModel() {
        this.$refs.model.validate((valid) => {
          if (valid) {
            console.log("555555555555555555", this.model.data);
            console.log("555555555555555555", this.model.data.id);
            if (this.model.data.id === 0) {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/dicLabel",
                method: "post",
                data: this.model.data,
                succeed: () => {
                  this.initLabels();
                  this.$message.success("保存成功");
                  this.model.visible = false;
                  this.$refs.model.resetFields();
                },
              });
            } else {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/dicLabel",
                method: "put",
                data: this.model.data,
                succeed: () => {
                  this.initLabels();
                  this.$message.success("保存成功");
                  this.model.visible = false;
                  this.$refs.model.resetFields();
                },
              });
            }
          }
        });
      },

      initLabels() {
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabel/tree?type.notEquals=5",
          method: "get",
          succeed: (res) => {
            this.labels = res;
          },
        });
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/dicLabel/tree?type.equals=5",
          method: "get",
          succeed: (res) => {
            this.allRelationshipsTreeInfo = res;
          },
        });
      },

      /////////////////////////////////////////////////////////////////////
      /*
              关系处理部分
               */
      /////////////////////////////////////////////////////////////////////

      //点击关系树节点
      treeRelationClick(data, node) {
        // console.log("rrrrrrrrrrrrrrrrr", data);
        if (node.level == 1 && data.label_name == '关系') {
          this.currRelationlId = 0;
        } else {
          this.currRelationlId = data.id;
        }
        this.currRelationLabelName = data.label_name;
      },
      //鼠标浮动到具体的节点 显示操作
      onMouseOver(node, data) {
        this.currentTreeMoveID = data.id;
        if (node.level == 1 && data.label_name == '关系') {
          this.isOnmove = false;
        } else {
          this.isOnmove = true;
        }

      },
      //清除浮动
      onMouseDown(node, data) {
        this.isOnmove = false;
        this.currentTreeMoveID = data.id;
      },
      //核心词添加初始化
      coreTextInit() {
        this.relation.data.tableData = [];
        let obj = {
          uuid: undefined,
          名称: undefined,
          别名: undefined,
          所属关系标签: undefined,
          所属关系类型: undefined,
          移动定义: undefined,
          relationship_label_name: undefined,
        };
        this.relation.data.tableData.push(obj)
        this.changeInput(this.relation.data.label_name)
      },
      //新增核心词行
      addItemRow() {
        let obj = {
          uuid: undefined,
          名称: undefined,
          别名: undefined,
          所属关系标签: undefined,
          所属关系类型: undefined,
          移动定义: undefined,
          relationship_label_name: this.relation.data.label_name,
        };
        this.relation.data.tableData.push(obj)
      },
      //选择字段并禁用
      selectedfield(val) {
        this.relationlist.forEach(res => {
          if (res.value == val) {
            console.log(res);
          }
        })
      },
      //输入内容 循环添加关系标签
      changeInput(val) {
        console.log(val);
        this.relation.process = 0; //添加进程 初始化
        if (val) {
          this.relation.data.tableData.forEach(res => {
            res['relationship_label_name'] = val;
          })
        }
      },
      //添加关系界面
      addRelationship() {
        this.relation.visible = true;
        this.TitleRelation = "添加关系节点";
        this.relation.process = 0; //添加进程 初始化
        this.relation.data = {
          id: 0,
          label_name: "",
          parent_id: this.currRelationlId,
          is_show: 0,
          type: 5,
          target: 0,
          addtime: new Date(),
        };
        this.coreTextInit();
        this.$refs['relation'].resetFields();
      },
      //编辑关系
      editRelative(data, node) {
        console.log(data);
        this.relation.visible = true;
        this.TitleRelation = "编辑关系节点";
        setTimeout(() => {
          this.$refs['relation'].resetFields();
          this.currentTreeData = data; //带入data
          this.relation.process = 0; //添加进程 初始化
          this.relation.data = {
            id: data.id,
            label_name: data.label_name,
            parent_id: data.parent_id,
            is_show: data.is_show,
            type: data.type,
            target: data.target,
            addtime: data.addtime,
            tableData: []
          };
          this.getKeyString(data);
        })
      },
      //删除关系
      delRelative(data, node) {
        if (node.level == 1 && data.label_name == '关系') {
          this.currRelationlId = data.id;
        } else {
          this.currRelationlId = data.id;
        }
        this.deleteRelationship()
      },
      //请求关键字
      getKeyString(data) {
        this.$store.dispatch("ajaxService", {
          url: `/services/app-zonghe/api/core_word?relationship_label_name.equals=${data.label_name}`,
          method: "get",
          succeed: (res) => {
            console.log(res);
            if (res.length > 0) {
              this.relation.data.tableData = res;
              // this.deleteKeyString(this.relation.data.tableData);//删除
            } else {
              this.coreTextInit()
            }
          },
        });
      },
      //删除关键字
      deleteKeyString(list) {
        let keysString = [];
        for (let a in list) {
          keysString.push(list[a].id);
          delete this.relation.data.tableData[a].id;
          if (Number(a) == list.length - 1) {
            this.$store.dispatch("ajaxService", {
              url: `/services/app-zonghe/api/core_word?ids=${keysString.join(',')}`,
              method: "delete",
              succeed: (res) => {
                console.log(res);
              },
            });
          }
        }

      },
      //修改关键字
      editKeyString(list) {
        if(list.length==0){
          return;
        }
        for (let a in list) {
          if (Number(a) == list.length - 1) {
            this.$store.dispatch("ajaxService", {
              url: `/services/app-zonghe/api/core_word`,
              method: "put",
              data: list[a],
              succeed: (res) => {
                console.log(res);
              },
            });
          }
        }

      },
      //行内删除关键字
      handleDelete(index) {
        this.$confirm('此操作将永久删除该行, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let rowdata = this.relation.data.tableData[index];
          console.log(rowdata);
          if (rowdata.id) {
            this.$store.dispatch("ajaxService", {
              url: `/services/app-zonghe/api/core_word?ids=${rowdata.id}`,
              method: "delete",
              succeed: () => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                this.relation.data.tableData.splice(index, 1);
              },
            });
          } else {
            this.relation.data.tableData.splice(index, 1);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //添加关系功能实现
      saveRelationship() {
        this.$refs.relation.validate((valid) => {
          if (valid) {
            if (this.relation.data.id === 0) {
              console.log(this.relation.data);
              if (this.relation.process == 0) {
                this.$store.dispatch("ajaxService", {
                  url: "/services/app-zonghe/api/dicLabel",
                  method: "post",
                  data: this.relation.data,
                  succeed: () => {
                    this.relation.process++;
                    //创建关键字
                    this.$store.dispatch("ajaxService", {
                      url: `/services/app-zonghe/api/core_word/_list`,
                      method: "post",
                      data: this.relation.data.tableData,
                      succeed: () => {
                        this.saveRelationshipKeys()
                      },
                    });
                  },
                });

              } else if (this.relation.process == 1) {
                this.saveRelationshipKeys()
              }
            } else {
              //编辑分流
              //用id 分流
              let arrId = [];
              let arr = [];
              for (const item of this.relation.data.tableData) {
                if (item.id) {
                  arrId.push(item);
                } else {
                  arr.push(item);
                }
              }
              if (this.relation.process == 0) {
                this.$store.dispatch("ajaxService", {
                  url: "/services/app-zonghe/api/dicLabel",
                  method: "put",
                  data: this.relation.data,
                  succeed: () => {
                    this.relation.process++;
                    //修改关键字
                    this.editKeyString(arrId);
                    this.saveRelationshipKeys(arr);
                  },
                });
              } else if (this.relation.process == 1) {
                this.editKeyString(arrId);
                this.saveRelationshipKeys(arr);
              }
            }
          }
        });
      },
      //关系关键字调用接口操作
      saveRelationshipKeys(arr) {
        let data = []
        if (arr) {
          data = arr;
        } else {
          data = this.relation.data.tableData;
        }
        if(data.length==0){
          this.relation.process++;
          this.relation.visible = false;
          this.initLabels();
          return;
        }
        this.$store.dispatch("ajaxService", {
          url: `/services/app-zonghe/api/core_word/_list`,
          method: "post",
          data: data,
          succeed: () => {
            this.relation.process++;
            this.initLabels();
            this.$message.success("保存成功");
            this.relation.visible = false;
          },
        });
      },
      //删除关系
      deleteRelationship() {
        this.$confirm("此操作将永久删除该关系, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.$store.dispatch("ajax", {
              url: "services/app-zonghe/api/dicLabel/" + this.currRelationlId,
              method: "delete",
              succeed: () => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });

                this.currRelationlId = 0;
                this.initLabels();
              },
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      },

      //根据选中的关系 查询其关联的关系列表
      getModelRelationships(pageIndex) {
        if (pageIndex === undefined) {
          pageIndex = this.modelRelationshipsPaginations.pageIndex;
        } else {
          this.modelRelationshipsPaginations.pageIndex = pageIndex;
        }

        this.$store.dispatch("ajaxEx", {
          url: "services/app-zonghe/api/dicLabel/" +
            this.currModelId +
            "/relationships",
          method: "get",
          data: {
            page: pageIndex - 1,
            size: this.modelRelationshipsPaginations.pageSize,
          },
          succeed: (res) => {
            this.modelRelationships = res.data;
            this.modelRelationshipsPaginations.total = parseInt(
              res.headers["x-total-count"]
            );
          },
        });
      },
      //删除关系
      delModelRelationship(row) {
        console.log("del model relationship................. ", row);
        this.$store.dispatch("ajax", {
          url: "services/app-zonghe/api/relationship/" + row.id,
          method: "delete",
          data: {},
          succeed: () => {
            this.getModelRelationships();
            this.$message.success("删除成功");
            this.delPopoverClose("del_popover_" + row.id);
          },
        });
      },
      //新增关系
      addModelRelationship() {
        this.modelRelationship.visible = true;
        this.modelRelationship.data = {
          id: 0,
          relationship_type: this.currRelationlId,
          relationship_label_name: this.currRelationLabelName,
          description: "关系描述",
          start_node_type: this.currModelId,
          start_node_label_name: this.currModelLabelName,
          end_node_type: 0,
          end_node_label_name: "",
          direction: 0,
        };
      },
      //编辑模型的关系信息
      editModelRelationship(row) {
        this.modelRelationship.visible = true;
        // this.modelRelationship.data = this.clone(row);
        this.modelRelationship.data = this.clone(row);
      },
      //添加或者更新关系信息
      saveModelRelationship() {
        this.$refs.modelRelationship.validate((valid) => {
          if (valid) {
            if (this.modelRelationship.data.id === 0) {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/relationship",
                method: "post",
                data: this.modelRelationship.data,
                succeed: () => {
                  this.getModelRelationships();
                  this.$message.success("保存成功");
                  this.modelRelationship.visible = false;
                  this.$refs.modelRelationship.resetFields();
                },
              });
            } else {
              this.$store.dispatch("ajax", {
                url: "services/app-zonghe/api/relationship",
                method: "put",
                data: this.modelRelationship.data,
                succeed: () => {
                  this.getModelRelationships();
                  this.$message.success("保存成功");
                  this.modelRelationship.visible = false;
                  this.$refs.modelRelationship.resetFields();
                },
              });
            }
          }
        });
      },
      //编辑关系 --开始类型和结束类型弹出
      // showTree(){
      //     // this.$store.dispatch('ajax', {
      //     //     url: 'services/app-zonghe/api/dicLabel/tree?type.notEquals=5', method: 'get', succeed: (res) => {
      //     //         this.labels = res;
      //     //     }
      //     // });
      //     // this.TreeType=type;
      // },
      //添加修改关系信息时 选中后进行 替换值
      nodeClick(data, type) {
        if (type == "start") {
          this.$refs["popup_tree_popover_start"].doClose();
          this.modelRelationship.data.start_node_type = data.id;
          this.modelRelationship.data.start_node_label_name = data.label_name;
        } else {
          this.$refs["popup_tree_popover_end"].doClose();
          this.modelRelationship.data.end_node_type = data.id;
          this.modelRelationship.data.end_node_label_name = data.label_name;
        }
      },

      // blurPropertyName(data1) {
      //   console.log(
      //     "11111111111111111111111111",
      //     data1,
      //     this.modelProperty.data.displayName
      //   );
      //   if (
      //     this.modelProperty.data.displayName == "" ||
      //     this.modelProperty.data.displayName == null ||
      //     this.modelProperty.data.displayName == undefined
      //   ) {
      //     this.modelProperty.data.displayName = this.modelProperty.data.name;
      //   }
      // },
    },
    mounted() {
      this.initLabels();
    },
  };
</script>
<style scoped>
  .el-container {
    width: 100%;
    height: calc(100% - 66px);
  }

  .addItem {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
  }
</style>
<!--<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->